import React, { Component, createRef } from 'react'

export default class App extends Component {
  inputRef = createRef()
  state = {
    bBar: false,
  }
  handleClick = () => {
    /* this.setState({ bBar: !this.state.bBar })
    // 其实是想等待 bBar 为 true 了之后，input 才显示，才能获取 DOM
    this.inputRef.current.focus() */

    /* this.setState({ bBar: !this.state.bBar }, () =>
      this.inputRef.current.focus()
    ) */
    this.setState({ bBar: !this.state.bBar })
  }
  render() {
    return (
      <div>
        <h3>App</h3>
        {this.state.bBar && <input ref={this.inputRef} type='text' />}
        <button onClick={this.handleClick}>回复</button>
      </div>
    )
  }
  componentDidUpdate() {
    this.inputRef.current.focus()
  }
}
